<!-- 留言板前台 -->

<style type="text/css">

    .form-horizontal .control-group {
        margin-bottom: 20px;
    }

    .form-horizontal .control-label {
        float: left;
        width: 250px;
        padding-top: 3px;
        text-align: right;

        font-size: 20px;
    }

    .form-horizontal .controls {
        margin-left: 260px;
    }

    .m-wrap {

        width: 450px !important;

        padding: 6px 6px !important;
        line-height: 20px;
        font-weight: normal;
        vertical-align: top;

        background-color: #fff;
        background-image: none;

    }

    .form-actions {
        text-align: center;
        margin-bottom: 30px;
    }

    .form-actions button {
        font-weight: 500;
        font-size: 20px;
        padding: 5px 10px;
        border: 1px solid transparent;
        color: #ffffff;
    }

    .green {

        background-color: #54c254;
    }

    .red {

        background-color: #a00;
    }

    .blue {

        background-color: #4f86bc;
    }

    /* textarea,*/

    #reply_list .pagination ul li .current {
        color: #a00;
    }

    #reply_list .pagination ul > li > a:hover, .pagination ul > li > a:focus, .pagination ul > .active > a, .pagination ul > .active > span {
        background-color: #f5f5f5;
    }

    #reply_list .pagination ul > li > a, .pagination ul > li > span {
        float: left;
        padding: 4px 12px;
        line-height: 20px;
        text-decoration: none;
        background-color: #fff;
        border: 1px solid #ddd;
        border-left-width: 0;
    }

    #reply_list .pagination ul > li:first-child > a, .pagination ul > li:first-child > span {
        border-left-width: 1px;
        -webkit-border-bottom-left-radius: 4px;
        border-bottom-left-radius: 4px;
        -webkit-border-top-left-radius: 4px;
        border-top-left-radius: 4px;
        -moz-border-radius-bottomleft: 4px;
        -moz-border-radius-topleft: 4px;
    }

    #reply_list .pagination ul > li {
        display: inline;
    }

    #reply_list .pagination ul > li > a, .pagination ul > li > span {
        float: left;
        padding: 4px 12px;
        line-height: 20px;
        text-decoration: none;
        background-color: #fff;
        border: 1px solid #ddd;
        border-left-width: 0;
    }

    #reply_list .pagination {
        float: right;
    }

    #reply_list .pagination ul {
        display: inline-block;
        margin-bottom: 0;
        margin-left: 0;
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        border-radius: 4px;
        -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
        -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    }

    #reply_list h4.media-heading {
        position: relative;
    }

    #reply_list h4.media-heading span a {
        color: #78cff8;
    }

    #reply_list .ask-body {
        padding: 10px 30px;
        color: #6F7275;
        margin: 15px 0px 0px 30px;
        border-left: 5px solid #4dfc2c;
        font-size: 17px;
        background-color: rgb(236, 255, 248);
    }

    #reply_list .reply-body {
        padding: 10px 30px;
        color: #6F7275;
        margin: 0px 0px 0px 50px;
        border-left: 5px solid #fc6264;
        background-color: rgb(255, 241, 241);

        font-size: 17.5px;
    }
</style>
<form id="form" action="{:addons_url('Guestbook://Guestbook/add')}" method="post" class="form-horizontal">
    <div class="control-group">
        <label class="control-label">姓名</label>

        <div class="controls">
            <input name="name" style="border: 1px solid #bababa;" type="text" placeholder=""
                   class="m-wrap medium name"/>
            <span class="help-inline" style="color:red; display:none;">请输入姓名</span>
        </div>
    </div>
    <div class="control-group">
        <label class="control-label">Email</label>

        <div class="controls">
            <input name="email" style="border: 1px solid #bababa;" type="text" placeholder=""
                   class="m-wrap medium email"/>
            <span class="help-inline" style="color:red; display:none;">请输入邮箱</span>
        </div>
    </div>
    <div class="control-group">
        <label class="control-label">电话</label>

        <div class="controls">
            <input name="tel" type="text" style="border: 1px solid #bababa;" placeholder="" class="m-wrap medium tel"/>
            <span class="help-inline"></span>
        </div>
    </div>
    <div class="control-group">
        <label class="control-label">咨询主题</label>

        <div class="controls">
            <input name="title" type="text" style="border: 1px solid #bababa;" placeholder=""
                   class="m-wrap medium title"/>
            <span class="help-inline" style="color:red; display:none;">请输入标题</span>
        </div>
    </div>
    <div class="control-group">
        <label class="control-label">咨询内容</label>

        <div class="controls">
            <textarea name="content" style="border: 1px solid #bababa;" class="large m-wrap content"
                      style="height: 60px" rows="5"></textarea>
            <span class="help-inline" style="color:red; display:none;">请输入内容</span>
        </div>
    </div>
    <input type="hidden" name="post_id" value="{$post_id}"/>

    <div class="form-actions">
        <button type="button" class="btn submit green">提交</button>
        <button type="reset" class="btn red">重写</button>
    </div>
</form>
<div class="media" id="reply_list">
    <h3>留言列表<span style="float:right;font-size:12px;">{$count}条/{$pages}页</span></h3>
    <hr/>
    <volist name="guestbook" id="guestbook">


        <div class="media-body">

            <h4 class="media-heading">{$guestbook['name']}: 询问 关于: {$guestbook['title']} 的问题
                 <span style="float:right;">{$guestbook['date'] |strtotime|friend_date} /
                    <span style="font-size:12px;">ip: {$guestbook['ip']}</span></span>
            </h4>

            <div class="ask-body">
                内容: {$guestbook['content']}
            </div>

            <div class="reply-body">

                管理员回复:

                {$guestbook['reply']}
            </div>
        </div>

        <hr>

    </volist>
    <div class="pagination">
        <ul>{$pager}</ul>
    </div>
    <br/>
    <br/> <br/>
    <br/> <br/>
    <br/>
</div>


<script type="text/javascript" src="__PUBLIC__/share/js/jquery-1.9.0.min.js"></script>
<script type="text/javascript">

    $(".submit").click(function () {

        $(".help-inline").fadeOut();

        if ($(".name").val() == "") {
            $(".name + .help-inline").fadeIn();
        }
        else if ($(".email").val() == "") {
            $(".email + .help-inline").fadeIn();
        }
        else if ($(".title").val() == "") {
            $(".title + .help-inline").fadeIn();
        }
        else if ($(".content").val() == "") {
            $(".content + .help-inline").fadeIn();
        }
        else {
            $("#form").submit();
        }
    });
</script>